import * as React from "react";
import * as ReactDOM from "react-dom";

import "./Cart.less";
import NavBar from "../Components/NavBar/NavBar";


export interface CartProps {

}

export interface State {
    isAllselect: boolean,
    OrderProduct: any
}

export default class Cart extends React.Component<CartProps, State> {
    //默认属性
    static readonly defaultProps: CartProps = {};

    constructor(props: CartProps) {
        super(props);
        //默认状态
        this.state = {
            isAllselect: false,
            OrderProduct: [
                {
                    "ProductCode": "1",
                    "ProductName": "维一植物精油",
                    "ProductBrand": "白云山 维一",
                    "ProductType": "30盒/箱",
                    "ProductUnit": "盒",
                    "ProductImageUrl": "http://haijisz8.hyxmt.cn/Files/image/2017032910284099.jpg",
                    "Product_ID": 2,
                    "Qty": 30,
                    "Price": "43.00",
                    "Brand_ID": 0,
                    "OrderCategory": "",
                    "OrderColour": "",
                    "OrderSize": "",
                    "StockQty": -549525,
                    isSelect: false,
                    "OrderUnits": [
                        {
                            "Number": 1,
                            "OrderUnit": "盒",
                            "OrderUnitPacking": 1,
                            "IsUse": false
                        },
                        {
                            "Number": 2,
                            "OrderUnit": "箱",
                            "OrderUnitPacking": 30,
                            "IsUse": true
                        }
                    ],
                }
            ]
        };
    }

    //组件挂载后回调
    componentDidMount() {
        document.title = "购物车";

    }


    render() {
        return <div className="Cart">
            <NavBar title={'进货单'}/>
            <div className="list">
                <div className="item">
                    <div className="shop-name">

                        <i className={`iconfont ${this.state.isAllselect ? 'icon-gouxuan3' : 'icon-gouxuanzhong'}`}
                           onClick={() => {
                               this.setState({isAllselect: !this.state.isAllselect})
                           }}/>
                        <span style={{
                            paddingLeft: '1rem',
                            paddingRight: '2rem',
                        }}>植物精油</span>
                        <span>
                            <select name="" id="">
                                <option value="直接向总部">直接向总部</option>
                            </select>
                        </span>
                    </div>

                    {this.state.OrderProduct.map((it, index) => {
                        return <div>
                            <div className="product">
                                <i className={`iconfont ${this.state.isAllselect ? 'icon-gouxuan3' : 'icon-gouxuanzhong'}`}
                                   onClick={() => {
                                       this.setState({isAllselect: !this.state.isAllselect})
                                   }}/>
                                <img src={it.ProductImageUrl} className="cover"/>
                                <div className="info">
                                    <p>{it.ProductName}</p>
                                    <p>{it.Price} x {it.Qty}</p>
                                    <p>订货数量：{it.Qty} 盒</p>
                                </div>
                                <button className="btn btn-edit" onClick={() => {
                                    const OrderProduct = this.state.OrderProduct;
                                    OrderProduct[index].isEdit = !OrderProduct[index].isEdit;
                                    this.setState({OrderProduct})
                                }}>
                                    <i className="iconfont icon-bianji"/>
                                </button>
                            </div>
                            {it.isEdit ? <div className="edit">
                                <div className="sku-item strong">
                                    <strong>规格</strong>
                                    <strong>包装数量</strong>
                                    <strong>操作</strong>
                                </div>
                                <div className="sku-item">
                                    <span>箱</span>
                                    <span>30</span>
                                    <span className={'fun'}>
                                        <button className="btn btn-reduce">-</button>
                                        <input type="number" value={0}/>
                                        <button className="btn btn-add">+</button>
                                    </span>
                                </div>
                                <div className="btns">
                                    <div className="btn btn-delete">删除</div>
                                    <div className="btn btn-confrim">完成</div>
                                </div>
                            </div> : null}
                        </div>
                    })}

                </div>
            </div>
        </div>
    }
}
